<html lang="zh-Hans">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="author" content="www.dwenzhao.cn">
    <meta name="description" content="">
    <meta http-equiv="refresh" content="9999">
    <title>正丁烷，异丁烷</title>
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style type="text/css">
        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .btn-primary {
            color: #fff;
            background-color: #60a5e0;
            border-color: #60a5e0;
        }
        .btn-lg {
            font-weight: bold;
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.3333333;
            border-radius: 6px;
        }
    </style>
</head>

<body style="background-color: #1f848a;">
    <div id="main2">
        <div>
            <button onclick="selchange(ISOBUTANE)" class="btn btn-primary btn-lg">正丁烷</button>
            <button onclick="selchange(NISOBUTANE)" class="btn btn-primary btn-lg">异丁烷</button>
        </div>
        <div id="content1">
            <div id="Stats-output"></div>
            <div id="WebGL-output"></div>
        </div>
    </div>
    </div>
    <script type="text/javascript" src="./js/three.min.js"></script>
    <script type="text/javascript" src="./js/TrackballControls.js"></script>
    <script type="text/javascript" src="./js/PDBLoader.js"></script>
    <script type="text/javascript" src="./js/pdb.js"></script>
    <script type="text/javascript">
    var WIDTH = window.innerWidth -10;
    var HEIGHT = window.innerHeight;
    var thing = window.sessionStorage.getItem("thing");
    if(thing == null) {
        thing = ISOBUTANE;
    }
    function selchange(thing) {
        window.sessionStorage.setItem("thing", thing);
        window.location.reload();
    }
    var camera, scene, renderer, labelsRenderer;
    var controls;
    var root;
    var loader = new THREE.PDBLoader();

    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 5000);
        camera.position.z = 1000;
        scene.add(camera);
        var light = new THREE.DirectionalLight(0xffffff, 0.8);
        light.position.set(1, 1, 1);
        scene.add(light);
        var light = new THREE.DirectionalLight(0xffffff, 0.5);
        light.position.set(-1, -1, 1);
        scene.add(light);
        root = new THREE.Group();
        scene.add(root);
        //
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setClearColor(0x1f848a);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(WIDTH, HEIGHT);
        document.getElementById('WebGL-output').appendChild(renderer.domElement);
        //labelRenderer = new THREE.CSS2DRenderer();
        //labelRenderer.setSize( WIDTH, HEIGHT );;
        //labelRenderer.domElement.style.position = 'absolute';
        //labelRenderer.domElement.style.top = '0';
        //labelRenderer.domElement.style.pointerEvents = 'none';
        //document.getElementById( 'WebGL-output' ).appendChild( labelRenderer.domElement );
        //
        controls = new THREE.TrackballControls(camera, renderer.domElement);
        controls.minDistance = 500;
        controls.maxDistance = 2000;
        //
        loadMoleculeByText(thing);
        //createMenu();
        renderer.render(scene, camera);
        window.addEventListener('resize', onWindowResize, false);
    }

    function loadMoleculeByText(text) {
        loader.loadText(text, function(geometry, geometryBonds, json) {
            var boxGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
            var sphereGeometry = new THREE.IcosahedronBufferGeometry(1, 2);
            var offset = geometry.center();
            geometryBonds.translate(offset.x, offset.y, offset.z);
            var positions = geometry.getAttribute('position');
            var colors = geometry.getAttribute('color');
            var position = new THREE.Vector3();
            var color = new THREE.Color();
            for (var i = 0; i < positions.count; i++) {
                position.x = positions.getX(i);
                position.y = positions.getY(i);
                position.z = positions.getZ(i);
                color.r = colors.getX(i);
                color.g = colors.getY(i);
                color.b = colors.getZ(i);
                var element = geometry.elements[i];
                var material = new THREE.MeshPhongMaterial({ color: color });
                var object = new THREE.Mesh(sphereGeometry, material);
                object.position.copy(position);
                object.position.multiplyScalar(75);
                object.scale.multiplyScalar(25);
                root.add(object);
            }
            positions = geometryBonds.getAttribute('position');
            var start = new THREE.Vector3();
            var end = new THREE.Vector3();
            for (var i = 0; i < positions.count; i += 2) {
                start.x = positions.getX(i);
                start.y = positions.getY(i);
                start.z = positions.getZ(i);
                end.x = positions.getX(i + 1);
                end.y = positions.getY(i + 1);
                end.z = positions.getZ(i + 1);
                start.multiplyScalar(75);
                end.multiplyScalar(75);
                var color = new THREE.Color();
                color.r = 0.59;
                color.g = 0.55;
                color.b = 0.54;
                var material = new THREE.MeshPhongMaterial({ color: color });
                var object = new THREE.Mesh(boxGeometry, material);
                object.position.copy(start);
                object.position.lerp(end, 0.5);
                object.scale.set(5, 5, start.distanceTo(end));
                object.lookAt(end);
                root.add(object);
            }
            render();
        });
        animate();
    }

    function loadMolecule(url) {
        while (root.children.length > 0) {
            var object = root.children[0];
            object.parent.remove(object);
        }
        loader.load(url, function(geometry, geometryBonds, json) {
            var boxGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
            var sphereGeometry = new THREE.IcosahedronBufferGeometry(1, 2);
            var offset = geometry.center();
            geometryBonds.translate(offset.x, offset.y, offset.z);
            var positions = geometry.getAttribute('position');
            var colors = geometry.getAttribute('color');
            var position = new THREE.Vector3();
            var color = new THREE.Color();
            for (var i = 0; i < positions.count; i++) {
                position.x = positions.getX(i);
                position.y = positions.getY(i);
                position.z = positions.getZ(i);
                color.r = colors.getX(i);
                color.g = colors.getY(i);
                color.b = colors.getZ(i);
                var element = geometry.elements[i];
                var material = new THREE.MeshPhongMaterial({ color: color });
                var object = new THREE.Mesh(sphereGeometry, material);
                object.position.copy(position);
                object.position.multiplyScalar(75);
                object.scale.multiplyScalar(25);
                root.add(object);
            }
            positions = geometryBonds.getAttribute('position');
            var start = new THREE.Vector3();
            var end = new THREE.Vector3();
            for (var i = 0; i < positions.count; i += 2) {
                start.x = positions.getX(i);
                start.y = positions.getY(i);
                start.z = positions.getZ(i);
                end.x = positions.getX(i + 1);
                end.y = positions.getY(i + 1);
                end.z = positions.getZ(i + 1);
                start.multiplyScalar(75);
                end.multiplyScalar(75);
                var color = new THREE.Color();
                color.r = 0.59;
                color.g = 0.55;
                color.b = 0.54;
                var material = new THREE.MeshPhongMaterial({ color: color });
                var object = new THREE.Mesh(boxGeometry, material);
                object.position.copy(start);
                object.position.lerp(end, 0.5);
                object.scale.set(5, 5, start.distanceTo(end));
                object.lookAt(end);
                root.add(object);
            }
            render();
        }, function(xhr) {
            if (xhr.lengthComputable) {
                console.log("xhr", xhr);
                var percentComplete = xhr.loaded / xhr.total * 100;
                // console.log(Math.round(percentComplete, 2) + '% downloaded');
            }
        }, function(xhr) {});
        animate();
    }
    //
    function onWindowResize() {
        camera.aspect = WIDTH / HEIGHT;
        camera.updateProjectionMatrix();
        renderer.setSize(WIDTH, HEIGHT);
        render();
    }

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        var time = Date.now() * 0.0004;
        root.rotation.x = time;
        root.rotation.y = time * 0.7;
        render();
    }

    function render() {
        renderer.render(scene, camera);
    }
    window.onload = init;
    </script>
</body>

</html>